<template>
  <div class="container">
    <h2 class="homeTitle">
      Today's data<i>{{ days[1] }}</i
      ><span><router-link to="statistics">Detailed data</router-link></span>
    </h2>
    <div class="overviewBox">
      <ul>
        <li>
          <p class="tit">turnover</p>
          <p class="num">${{ overviewData.turnover || 0 }}</p>
        </li>
        <li>
          <p class="tit">Valid orders</p>
          <p class="num">{{ overviewData.validOrderCount || 0 }}</p>
        </li>
        <li>
          <p class="tit">Order completion rate</p>
          <p class="num">
            {{
              overviewData.orderCompletionRate
                ? (overviewData.orderCompletionRate * 100).toFixed(0)
                : 0
            }}%
          </p>
        </li>
        <li>
          <p class="tit">Average unit price per customer</p>
          <p class="num">${{ overviewData.unitPrice || 0 }}</p>
        </li>

        <li>
          <p class="tit">Add Users</p>
          <p class="num">{{ overviewData.newUsers || '--' }}</p>
        </li>
      </ul>
    </div>
  </div>
</template>
<script lang="ts">
import { Component, Vue, Prop } from 'vue-property-decorator'
import { getday } from '@/utils/formValidate'
@Component({
  name: 'Overview'
})
export default class extends Vue {
  @Prop() private overviewData!: any
  get days() {
    return getday()
  }
}
</script>
